<template>
   <div style="height:100%;">
     <view-box ref="viewBox">
        <router-view></router-view>
    </view-box>
    <tabbar>
       <tabbar-item link="/Mission">
        <!-- <img slot="icon" src="../assets/demo/icon_nav_button.png"> -->
        <span slot="label">任务</span>
    </tabbar-item>
    <tabbar-item link="/message">
        <!-- <img slot="icon" src="../assets/demo/icon_nav_msg.png"> -->
        <span slot="label">Message</span>
    </tabbar-item>
    <tabbar-item link="/AddMission">
        <!-- <img slot="icon" src="../assets/demo/icon_nav_article.png"> -->
        <span slot="label">新增任务</span>
    </tabbar-item>
    <tabbar-item link="/explore">
        <!-- <img slot="icon" src="../assets/demo/icon_nav_article.png"> -->
        <span slot="label">Explore</span>
    </tabbar-item>
    <tabbar-item link="/User">
        <!-- <img slot="icon" src="../assets/demo/icon_nav_cell.png"> -->
        <span slot="label">User</span>
    </tabbar-item>
</tabbar>
</div>
</template>

<script>
    import Const from '../lib/const.js'
    import { Tabbar, TabbarItem } from 'vux'
    import { ViewBox } from 'vux'
    export default {
      name: 'Layout',
      components: {
        Tabbar,
        TabbarItem,
        ViewBox
    },
    data () {
        return {

        };
    },
    mounted() {
        let token = localStorage.getItem('token');
        if (!token) {
            this.$router.push('/login')
        } else {
            this.$http.get(Const.host + '/api/getuser',{
                headers:{
                    'Authorization': 'Bearer ' + token
                }
            }).then(response => {
                if (!response.data.code == '1') {
                    this.$router.push('/login')
                }
            }, response => {
                this.$router.push('/login')
            });
        }
    }
};
</script>

<style lang="css">
  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}
</style>